<template>
  <view class="wrap">
    <view class="bg-box">
      <!-- <view class="bg-box-main">
        <image class="title" src="https://ainengli.hzjrsw.com/jkhx/common/bg-title.png" mode="scaleToFill" />
        <text class="sub-title">为您的健康保驾护航</text>
      </view> -->
      <image
        class="bg-box-image"
        src="https://ainengli.hzjrsw.com/jkhx/weight/health-portrait-bg.png"
        mode="scaleToFill"
      />
    </view>
    <view class="content">
      <view class="tabActiveTwo tabActiveThree">
        <view class="card">
          <view class="interpretation">
            <view class="left">
              <text class="border" />
              <text class="name">体征信息</text>
            </view>
            <view class="right record" @tap="healthInput(1)">
              <text class="check-text">记录</text>
              <text type="" class="iconfont icon-zhankaijiantou1 img" />
            </view>
          </view>
          <view class="informationWrap cf">
            <view class="item" @tap="healthInfo('height')">
              <view class="top">
                <text type="" class="iconfont icon-shengao1 img" style="color: #539dfe" />
                <text class="name">身高</text>
                <text class="date">{{
                  state.healthList && state.healthList.height && state.healthList.height.collectTime
                    ? parseTime(
                        new Date(state.healthList.height.collectTime.replace(/\-/g, '/')).getTime(),
                        '{m}-{d}'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name">{{
                  state.healthList && state.healthList.height && state.healthList.height.itemValue
                    ? Number(state.healthList.height.itemValue).toFixed(1)
                    : '-'
                }}</text>
                <text class="unit">cm</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('weight')">
              <view class="top">
                <text type="" class="iconfont icon-tizhong1 img" style="color: #ffd666" />
                <text class="name">体重</text>
                <text class="date">{{
                  state.healthList && state.healthList.weight && state.healthList.weight.collectTime
                    ? parseTime(
                        new Date(state.healthList.weight.collectTime.replace(/\-/g, '/')).getTime(),
                        '{m}-{d}'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name">{{
                  state.healthList && state.healthList.weight && state.healthList.weight.itemValue
                    ? state.healthList.weight.itemValue
                    : '-'
                }}</text>
                <text class="unit">kg</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('bmi')">
              <view class="top">
                <text type="" class="iconfont icon-BMI1 img" style="color: #4bddbe" />
                <text class="name">BMI</text>
                <text class="date">{{
                  state.healthList && state.healthList.bmi && state.healthList.bmi.collectTime
                    ? parseTime(
                        new Date(state.healthList.bmi.collectTime.replace(/\-/g, '/')).getTime(),
                        '{m}-{d}'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <view style="display: flex; align-items: center">
                  <text class="name">{{
                    state.healthList && state.healthList.bmi && state.healthList.bmi.itemValue
                      ? state.healthList.bmi.itemValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.bmi &&
                      state.healthList.bmi.normalFlag &&
                      (state.healthList.bmi.normalFlag == 'H' ||
                        state.healthList.bmi.normalFlag == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-else-if="
                      state.healthList &&
                      state.healthList.bmi &&
                      state.healthList.bmi.normalFlag &&
                      state.healthList.bmi.normalFlag == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">kg/㎡</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('whr')">
              <view class="top">
                <text type="" class="iconfont icon-yaotunbi1 img" style="color: #857bff" />
                <text class="name">腰臀比</text>
                <text class="date">{{
                  state.healthList && state.healthList.whr && state.healthList.whr.collectTime
                    ? parseTime(
                        new Date(state.healthList.whr.collectTime.replace(/\-/g, '/')).getTime(),
                        '{m}-{d}'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <view style="display: flex; align-items: center">
                  <text class="name">{{
                    state.healthList && state.healthList.whr && state.healthList.whr.itemValue
                      ? state.healthList.whr.itemValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.whr &&
                      state.healthList.whr.normalFlag &&
                      (state.healthList.whr.normalFlag == 'H' ||
                        state.healthList.whr.normalFlag == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.whr &&
                      state.healthList.whr.normalFlag &&
                      state.healthList.whr.normalFlag == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
              </view>
            </view>
            <view class="item" @tap="healthInfo('sbp')">
              <view class="top">
                <text type="" class="iconfont icon-xieya1 img" style="color: #ffa654" />
                <text class="name">血压</text>
                <text class="date">{{
                  state.healthList && state.healthList.sbp && state.healthList.sbp.collectTime
                    ? parseTime(
                        new Date(state.healthList.sbp.collectTime.replace(/\-/g, '/')).getTime(),
                        '{m}-{d}'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <view style="display: flex; align-items: center">
                  <text
                    class="name"
                    v-if="
                      state.healthList &&
                      state.healthList.sbp &&
                      !state.healthList.sbp.itemValue &&
                      state.healthList.dbp &&
                      !state.healthList.dbp.itemValue
                    "
                  >
                    -
                  </text>
                  <text
                    class="name"
                    v-if="
                      state.healthList && state.healthList.sbp && state.healthList.sbp.itemValue
                    "
                  >
                    {{
                      state.healthList && state.healthList.sbp && state.healthList.sbp.itemValue
                        ? parseInt(state.healthList.sbp.itemValue)
                        : '-'
                    }}
                  </text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.sbp &&
                      state.healthList.sbp.normalFlag &&
                      (state.healthList.sbp.normalFlag == 'H' ||
                        state.healthList.sbp.normalFlag == 'H+')
                    "
                    class="trend default"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.sbp &&
                      state.healthList.sbp.normalFlag &&
                      state.healthList.sbp.normalFlag == 'L'
                    "
                    class="trend default on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <text
                    v-if="
                      state.healthList && state.healthList.dbp && state.healthList.dbp.itemValue
                    "
                    class="slash"
                    >/</text
                  >
                  <text
                    class="name"
                    v-if="
                      state.healthList && state.healthList.dbp && state.healthList.dbp.itemValue
                    "
                  >
                    {{ parseInt(state.healthList.dbp.itemValue) }}
                  </text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.dbp &&
                      state.healthList.dbp.normalFlag &&
                      (state.healthList.dbp.normalFlag == 'H' ||
                        state.healthList.dbp.normalFlag == 'H+')
                    "
                    class="trend default"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.dbp &&
                      state.healthList.dbp.normalFlag &&
                      state.healthList.dbp.normalFlag == 'L'
                    "
                    class="trend default on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">mmHg</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('heart_rate')">
              <view class="top">
                <text type="" class="iconfont icon-xinshuai1 img" style="color: #5383fe" />
                <text class="name">心率</text>
                <text class="date">{{
                  state.healthList &&
                  state.healthList.heartRate &&
                  state.healthList.heartRate.collectTime
                    ? parseTime(
                        new Date(
                          state.healthList.heartRate.collectTime.replace(/\-/g, '/')
                        ).getTime(),
                        '{m}-{d}'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <view style="display: flex; align-items: center">
                  <text class="name">{{
                    state.healthList &&
                    state.healthList.heartRate &&
                    state.healthList.heartRate.itemValue
                      ? parseInt(state.healthList.heartRate.itemValue)
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.heartRate &&
                      state.healthList.heartRate.normalFlag &&
                      (state.healthList.heartRate.normalFlag == 'H' ||
                        state.healthList.heartRate.normalFlag == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.heartRate &&
                      state.healthList.heartRate.normalFlag &&
                      state.healthList.heartRate.normalFlag == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">次/分</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('fbg')">
              <view class="top">
                <text type="" class="iconfont icon-xietang1 img" style="color: #ff746b" />
                <text class="name">血糖</text>
                <text class="meals">
                  {{
                    state.healthList &&
                    state.healthList.blood_sugar &&
                    state.healthList.blood_sugar.indicatorList &&
                    state.healthList.blood_sugar.indicatorList[0]
                      ? state.healthList.blood_sugar.indicatorList[0].indicatorName
                      : ''
                  }}
                </text>
                <text class="date">
                  {{
                    state.healthList &&
                    state.healthList.blood_sugar &&
                    state.healthList.blood_sugar.collectTime
                      ? parseTime(
                          new Date(
                            state.healthList.blood_sugar.collectTime.replace(/\-/g, '/')
                          ).getTime(),
                          '{m}-{d}'
                        )
                      : ''
                  }}
                </text>
              </view>
              <view class="min">
                <view style="display: flex; align-items: center">
                  <text class="name">
                    {{
                      state.healthList &&
                      state.healthList.blood_sugar &&
                      state.healthList.blood_sugar.indicatorList
                        ? state.healthList.blood_sugar.indicatorList[0].indicatorValue
                        : '-'
                    }}
                  </text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.blood_sugar &&
                      state.healthList.blood_sugar.indicatorList &&
                      state.healthList.blood_sugar.indicatorList[0] &&
                      (state.healthList.blood_sugar.indicatorList[0].indicatorStatus == 'H' ||
                        state.healthList.blood_sugar.indicatorList[0].indicatorStatus == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.blood_sugar &&
                      state.healthList.blood_sugar.indicatorList &&
                      state.healthList.blood_sugar.indicatorList[0] &&
                      state.healthList.blood_sugar.indicatorList[0].indicatorStatus == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">mmol/L</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('spo2')">
              <view class="top">
                <text type="" class="iconfont icon-xieyang1 img" style="color: #41a4ff" />
                <text class="name">血氧</text>
                <text class="date">{{
                  state.healthList && state.healthList.spo2 && state.healthList.spo2.collectTime
                    ? parseTime(
                        new Date(state.healthList.spo2.collectTime.replace(/\-/g, '/')).getTime(),
                        '{m}-{d}'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <view style="display: flex; align-items: center">
                  <text class="name">{{
                    state.healthList && state.healthList.spo2 && state.healthList.spo2.itemValue
                      ? state.healthList.spo2.itemValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.spo2 &&
                      state.healthList.spo2.normalFlag &&
                      (state.healthList.spo2.normalFlag == 'H' ||
                        state.healthList.spo2.normalFlag == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.spo2 &&
                      state.healthList.spo2.normalFlag &&
                      state.healthList.spo2.normalFlag == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">%</text>
              </view>
            </view>
            <!-- add -->
            <view class="item" @tap="healthInfo('blood_ketone')">
              <view class="top">
                <text type="" class="iconfont icon-xietong img" style="color: #857bff" />
                <text class="name">血酮</text>
                <text class="date">{{
                  state.healthList &&
                  state.healthList.blood_ketone &&
                  state.healthList.blood_ketone.collectTime
                    ? parseTime(
                        new Date(
                          state.healthList.blood_ketone.collectTime.replace(/\-/g, '/')
                        ).getTime(),
                        '{m}-{d}'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <view style="display: flex; align-items: center">
                  <text class="name">{{
                    state.healthList &&
                    state.healthList.blood_ketone &&
                    state.healthList.blood_ketone.indicatorList &&
                    state.healthList.blood_ketone.indicatorList.length
                      ? state.healthList.blood_ketone.indicatorList[0].indicatorValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.blood_ketone &&
                      state.healthList.blood_ketone.indicatorList &&
                      state.healthList.blood_ketone.indicatorList.length &&
                      (state.healthList.blood_ketone.indicatorList[0].indicatorStatus == 'H' ||
                        state.healthList.blood_ketone.indicatorList[0].indicatorStatus == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.blood_ketone &&
                      state.healthList.blood_ketone.indicatorList &&
                      state.healthList.blood_ketone.indicatorList.length &&
                      state.healthList.blood_ketone.indicatorList[0].indicatorStatus == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">mmol/L</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('uric_acid')">
              <view class="top">
                <text type="" class="iconfont icon-niaosuan img" style="color: #ff824d" />
                <text class="name">尿酸</text>
                <text class="date">{{
                  state.healthList &&
                  state.healthList.uric_acid &&
                  state.healthList.uric_acid.collectTime
                    ? parseTime(
                        new Date(
                          state.healthList.uric_acid.collectTime.replace(/\-/g, '/')
                        ).getTime(),
                        '{m}-{d}'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <view style="display: flex; align-items: center">
                  <text class="name">{{
                    state.healthList &&
                    state.healthList.uric_acid &&
                    state.healthList.uric_acid.indicatorList &&
                    state.healthList.uric_acid.indicatorList.length
                      ? state.healthList.uric_acid.indicatorList[0].indicatorValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.uric_acid &&
                      state.healthList.uric_acid.indicatorList &&
                      state.healthList.uric_acid.indicatorList.length &&
                      (state.healthList.uric_acid.indicatorList[0].indicatorStatus == 'H' ||
                        state.healthList.uric_acid.normalFlag == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.uric_acid &&
                      state.healthList.uric_acid.indicatorList &&
                      state.healthList.uric_acid.indicatorList.length &&
                      state.healthList.uric_acid.indicatorList[0].indicatorStatus == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">umol/L</text>
              </view>
            </view>
            <view class="item" @tap="healthInfo('sleep')">
              <view class="top">
                <text type="" class="iconfont icon-shuimian img" style="color: #41a4ff" />
                <text class="name">睡眠</text>
                <text class="date">{{
                  state.healthList && state.healthList.sleep && state.healthList.sleep.collectTime
                    ? parseTime(state.healthList.sleep.collectTime, '{m}-{d}')
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name">{{
                  state.healthList && state.healthList.sleep && state.healthList.sleep.itemValue
                    ? getSleepTimes(state.healthList.sleep.itemValue)
                    : '-'
                }}</text>
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.sleep &&
                    state.healthList.sleep.normalFlag &&
                    (state.healthList.sleep.normalFlag == 'H' ||
                      state.healthList.sleep.normalFlag == 'H+')
                  "
                  class="trend"
                  src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                  alt=""
                />
                <img
                  v-if="
                    state.healthList &&
                    state.healthList.sleep &&
                    state.healthList.sleep.normalFlag &&
                    state.healthList.sleep.normalFlag == 'L'
                  "
                  class="trend on"
                  src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                  alt=""
                />
                <!-- <text class="date">h</text> -->
              </view>
            </view>
            <view class="item" @tap="healthInfo('water')">
              <view class="top">
                <text type="" class="iconfont icon-yinshui img" style="color: #4bddbe" />
                <text class="name">饮水</text>
                <text class="date">{{
                  state.healthList && state.healthList.water && state.healthList.water.collectTime
                    ? parseTime(state.healthList.water.collectTime, '{m}-{d}')
                    : ''
                }}</text>
              </view>
              <view class="min">
                <view style="display: flex; align-items: center">
                  <text class="name">{{
                    state.healthList && state.healthList.water && state.healthList.water.itemValue
                      ? state.healthList.water.itemValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.water &&
                      state.healthList.water.normalFlag &&
                      (state.healthList.water.normalFlag == 'H' ||
                        state.healthList.water.normalFlag == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.water &&
                      state.healthList.water.normalFlag &&
                      state.healthList.water.normalFlag == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">ml</text>
              </view>
            </view>

            <view class="item" @tap="healthInfo('blood_fat')" style="width: 100%">
              <view class="top">
                <text type="" class="iconfont icon-xiezhi img" style="color: #28dfdf" />
                <text class="name">血脂</text>

                <text class="date">{{
                  state.healthList &&
                  state.healthList.blood_fat &&
                  state.healthList.blood_fat.collectTime
                    ? parseTime(
                        new Date(
                          state.healthList.blood_fat.collectTime.replace(/\-/g, '/')
                        ).getTime(),
                        '{m}-{d}'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name-label">总胆固醇</text>
                <view class="special-label">
                  <text class="name">{{
                    state.healthList &&
                    state.healthList.blood_fat &&
                    state.healthList.blood_fat.indicatorList
                      ? state.healthList.blood_fat.indicatorList.filter(
                          (item) => item.indicatorKey == 'total_cholesterol'
                        )[0].indicatorValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.blood_fat &&
                      state.healthList.blood_fat.indicatorList &&
                      (state.healthList.blood_fat.indicatorList.filter(
                        (item) => item.indicatorKey == 'total_cholesterol'
                      )[0].indicatorStatus == 'H' ||
                        state.healthList.blood_fat.indicatorList.filter(
                          (item) => item.indicatorKey == 'total_cholesterol'
                        )[0].indicatorStatus == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.blood_fat &&
                      state.healthList.blood_fat.indicatorList &&
                      state.healthList.blood_fat.indicatorList.filter(
                        (item) => item.indicatorKey == 'total_cholesterol'
                      )[0].indicatorStatus == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">mmol/L</text>
              </view>

              <view class="min">
                <text class="name-label">甘油三酯</text>
                <view class="special-label">
                  <text class="name">{{
                    state.healthList &&
                    state.healthList.blood_fat &&
                    state.healthList.blood_fat.indicatorList
                      ? state.healthList.blood_fat.indicatorList.filter(
                          (item) => item.indicatorKey == 'tg'
                        )[0].indicatorValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.blood_fat &&
                      state.healthList.blood_fat.indicatorList &&
                      (state.healthList.blood_fat.indicatorList.filter(
                        (item) => item.indicatorKey == 'tg'
                      )[0].indicatorStatus == 'H' ||
                        state.healthList.blood_fat.indicatorList.filter(
                          (item) => item.indicatorKey == 'tg'
                        )[0].indicatorStatus == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.blood_fat &&
                      state.healthList.blood_fat.indicatorList &&
                      state.healthList.blood_fat.indicatorList.filter(
                        (item) => item.indicatorKey == 'tg'
                      )[0].indicatorStatus == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">mmol/L</text>
              </view>

              <view class="min">
                <text class="name-label">高密度脂蛋白</text>
                <view class="special-label">
                  <text class="name">{{
                    state.healthList &&
                    state.healthList.blood_fat &&
                    state.healthList.blood_fat.indicatorList
                      ? state.healthList.blood_fat.indicatorList.filter(
                          (item) => item.indicatorKey == 'hdlc'
                        )[0].indicatorValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.blood_fat &&
                      state.healthList.blood_fat.indicatorList &&
                      (state.healthList.blood_fat.indicatorList.filter(
                        (item) => item.indicatorKey == 'hdlc'
                      )[0].indicatorStatus == 'H' ||
                        state.healthList.blood_fat.indicatorList.filter(
                          (item) => item.indicatorKey == 'hdlc'
                        )[0].indicatorStatus == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.blood_fat &&
                      state.healthList.blood_fat.indicatorList &&
                      state.healthList.blood_fat.indicatorList.filter(
                        (item) => item.indicatorKey == 'hdlc'
                      )[0].indicatorStatus == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">mmol/L</text>
              </view>

              <view class="min">
                <text class="name-label">低密度脂蛋白</text>
                <view class="special-label">
                  <text class="name">{{
                    state.healthList &&
                    state.healthList.blood_fat &&
                    state.healthList.blood_fat.indicatorList
                      ? state.healthList.blood_fat.indicatorList.filter(
                          (item) => item.indicatorKey == 'ldlc'
                        )[0].indicatorValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.blood_fat &&
                      state.healthList.blood_fat.indicatorList &&
                      (state.healthList.blood_fat.indicatorList.filter(
                        (item) => item.indicatorKey == 'ldlc'
                      )[0].indicatorStatus == 'H' ||
                        state.healthList.blood_fat.indicatorList.filter(
                          (item) => item.indicatorKey == 'ldlc'
                        )[0].indicatorStatus == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.blood_fat &&
                      state.healthList.blood_fat.indicatorList &&
                      state.healthList.blood_fat.indicatorList.filter(
                        (item) => item.indicatorKey == 'ldlc'
                      )[0].indicatorStatus == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">mmol/L</text>
              </view>
            </view>

            <view class="item" @tap="healthInfo('liver_function')" style="width: 100%">
              <view class="top">
                <text type="" class="iconfont icon-gangongneng img" style="color: #ff746b" />
                <text class="name">肝功能</text>
                <text class="date">{{
                  state.healthList &&
                  state.healthList.liver_function &&
                  state.healthList.liver_function.collectTime
                    ? parseTime(
                        new Date(
                          state.healthList.liver_function.collectTime.replace(/\-/g, '/')
                        ).getTime(),
                        '{m}-{d}'
                      )
                    : ''
                }}</text>
              </view>
              <view class="min">
                <text class="name-label">谷草转氨酶</text>
                <view class="special-label">
                  <text class="name">{{
                    state.healthList &&
                    state.healthList.liver_function &&
                    state.healthList.liver_function.indicatorList
                      ? state.healthList.liver_function.indicatorList.filter(
                          (item) => item.indicatorKey == 'got'
                        )[0].indicatorValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.liver_function &&
                      state.healthList.liver_function.indicatorList &&
                      (state.healthList.liver_function.indicatorList.filter(
                        (item) => item.indicatorKey == 'got'
                      )[0].indicatorStatus == 'H' ||
                        state.healthList.liver_function.indicatorList.filter(
                          (item) => item.indicatorKey == 'got'
                        )[0].indicatorStatus == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.liver_function &&
                      state.healthList.liver_function.indicatorList &&
                      state.healthList.liver_function.indicatorList.filter(
                        (item) => item.indicatorKey == 'got'
                      )[0].indicatorStatus == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">U/L</text>
              </view>
              <view class="min">
                <text class="name-label">谷丙转氨酶</text>
                <view class="special-label">
                  <text class="name">{{
                    state.healthList &&
                    state.healthList.liver_function &&
                    state.healthList.liver_function.indicatorList
                      ? state.healthList.liver_function.indicatorList.filter(
                          (item) => item.indicatorKey == 'gpt'
                        )[0].indicatorValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.liver_function &&
                      state.healthList.liver_function.indicatorList &&
                      (state.healthList.liver_function.indicatorList.filter(
                        (item) => item.indicatorKey == 'gpt'
                      )[0].indicatorStatus == 'H' ||
                        state.healthList.liver_function.indicatorList.filter(
                          (item) => item.indicatorKey == 'gpt'
                        )[0].indicatorStatus == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.liver_function &&
                      state.healthList.liver_function.indicatorList &&
                      state.healthList.liver_function.indicatorList.filter(
                        (item) => item.indicatorKey == 'gpt'
                      )[0].indicatorStatus == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">U/L</text>
              </view>
              <view class="min">
                <text class="name-label">Y-谷氨酰转肽酶(Y-GT)</text>
                <view class="special-label">
                  <text class="name">{{
                    state.healthList &&
                    state.healthList.liver_function &&
                    state.healthList.liver_function.indicatorList
                      ? state.healthList.liver_function.indicatorList.filter(
                          (item) => item.indicatorKey == 'ygt'
                        )[0].indicatorValue
                      : '-'
                  }}</text>
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.liver_function &&
                      state.healthList.liver_function.indicatorList &&
                      (state.healthList.liver_function.indicatorList.filter(
                        (item) => item.indicatorKey == 'ygt'
                      )[0].indicatorStatus == 'H' ||
                        state.healthList.liver_function.indicatorList.filter(
                          (item) => item.indicatorKey == 'ygt'
                        )[0].indicatorStatus == 'H+')
                    "
                    class="trend"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                  <img
                    v-if="
                      state.healthList &&
                      state.healthList.liver_function &&
                      state.healthList.liver_function.indicatorList &&
                      state.healthList.liver_function.indicatorList.filter(
                        (item) => item.indicatorKey == 'ygt'
                      )[0].indicatorStatus == 'L'
                    "
                    class="trend on"
                    src="https://ainengli.hzjrsw.com/jkhx/common/health-portrait-up.png"
                    alt=""
                  />
                </view>
                <text class="unit">U/L</text>
              </view>
            </view>
          </view>
        </view>
        <view class="card">
          <view class="interpretation">
            <view class="left">
              <text class="border" />
              <text class="name">今日运动</text>
            </view>
            <view class="right record" @tap="healthInput(2)">
              <text class="check-text">记录</text>
              <text type="" class="iconfont icon-zhankaijiantou1 img" />
            </view>
          </view>
          <view v-if="sports.list.length > 0" class="interpretationContentWrap">
            <view class="timeWrap">
              <view class="time">{{ state.today }}</view>
              <view class="right">
                <text class="name">总计</text>
                <text class="num">{{ sports.totalTime }}</text>
                <text class="name">分钟</text>
              </view>
            </view>
            <view class="interpretationContent riskList default cf motionList">
              <view v-for="(item, index) of sports.list" :key="index" class="riskitem">
                {{ item.sportName }}
              </view>
            </view>
          </view>
          <view v-else class="interpretationContent riskList default motionList">
            <view class="wraps nodate">暂无数据</view>
          </view>
        </view>
        <view class="card">
          <view class="interpretation">
            <view class="left">
              <text class="border" />
              <text class="name">今日饮食</text>
            </view>
            <view class="right record" @tap="healthInput(3)">
              <text class="check-text">记录</text>
              <text type="" class="iconfont icon-zhankaijiantou1 img" />
            </view>
          </view>
          <view
            v-if="food.info.length == 0"
            class="interpretationContent riskList default recipeList"
          >
            <view class="wraps nodate">暂无数据</view>
          </view>
          <view v-else class="interpretationContentWrap">
            <view class="timeWrap recipe">
              <view class="time">{{ state.today }}</view>
              <view class="right">
                <text class="name">总计</text>
                <text class="num">{{ food.totalEnergy }}</text>
                <text class="name">千卡</text>
              </view>
            </view>
            <view
              v-for="(item, index) of food.info"
              :key="index"
              class="interpretationContent riskList default recipeList"
            >
              <view class="breakfast">
                <view class="title">{{ item.dietType }}</view>
                <view class="right">
                  <text class="num">{{ computeTotal(item.list) }}</text>
                  <text class="unit">千卡</text>
                </view>
              </view>
              <view class="wraps cf">
                <view v-for="(i, idx) of item.list" :key="idx" class="riskitem">
                  {{ i.dietName }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="card">
          <view class="interpretation">
            <view class="left">
              <text class="border" />
              <text class="name">用药信息</text>
            </view>
            <view class="right record" @tap="healthInput(4)">
              <text class="check-text">记录</text>
              <text class="iconfont icon-zhankaijiantou1 img" />
            </view>
          </view>
          <view class="interpretationContent riskList default cf medicationList">
            <view
              class="wraps cf"
              v-if="state.medicationInformationList && state.medicationInformationList.length > 0"
            >
              <view
                class="riskitem"
                v-for="(item, index) in state.medicationInformationList"
                :key="index"
              >
                {{ item.drugName }}
              </view>
            </view>
            <view v-else class="wraps nodate">暂无数据</view>
          </view>
        </view>
        <view class="authenticationBtn" v-if="false">
          <view class="wraps">
            <view class="goAuthentication">查看我的健康处方</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { infoGet, drugInfoGet, healthInfoAll } from '@/api/hmm'
import { query_get_sport } from '@/api/sports'
import { query_get_food } from '@/api/food'
import { label_info } from '@/api/body'
import { parseTime } from '@/utils/tools'
import { onShow } from '@dcloudio/uni-app'
// import { maskIdCard } from '@/static/js/checkMobile.js'
const state = reactive({
  today: parseTime(new Date(), '{yyyy}-{mm}-{dd}'),
  tabActive: 2,
  show: false,
  estimateList: [],
  diseaseBrief: '',
  healthPrescription: [],
  medicationInformationList: [],
  healthList: {},
  userInfo: {}
})
const sports = reactive({
  totalTime: 0,
  list: []
})
const food = reactive({
  totalEnergy: 0,
  info: {}
})
const tabList = ref([
  {
    name: '健康评估'
  },
  {
    name: '健康处方'
  },
  {
    name: '健康数据'
  }
])
onShow(() => {
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  // getEstimate() // 健康画像一期健康评估功能
  // 健康数据获取
  getHealthData()
  drugInfoGetFun()
  healthInfoAllFun()
})

// 获取睡眠时长
const getSleepTimes = (value: string) => {
  const sleepTimes = value.split('.')
  const hour = Number(sleepTimes[0])
  if (sleepTimes[1]) {
    const minute = Math.round(Number('0.' + sleepTimes[1]) * 60)
    return `${hour}小时${minute > 10 ? minute : '0' + minute}分`
  } else {
    return `${hour}小时`
  }
}

const getEstimate = () => {
  // 健康评估
  uni.showLoading({
    title: '加载中'
  })
  const param = state.userInfo.empi
  label_info(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0 && res.data.length > 0) {
      state.estimateList = res.data
      state.estimateList.forEach((item) => {
        item.riskElements = item.riskElements.split(',')
        item.summary = item.summary && item.summary.replaceAll(' ', '&nbsp;')
      })
    }
  })
}
// const getPrescription = () => {
//   // 健康处方
//   uni.showLoading({
//     title: '加载中'
//   })
//   let param = state.userInfo.empi
//   infoGet(param).then((res) => {
//     uni.hideLoading()
//     if (res.code == 0) {
//       state.healthPrescription =
//         res.data && res.data.itemContent ? JSON.parse(res.data && res.data.itemContent) : []
//     } else {
//       state.healthPrescription = []
//     }
//   })
// }
const drugInfoGetFun = () => {
  state.medicationInformationList = []
  const drugEmpi = state.userInfo.empi
  drugInfoGet(drugEmpi).then((res) => {
    if (res.code == 0) {
      if (res.data && res.data.length > 0) {
        state.medicationInformationList = res.data
      } else {
        state.medicationInformationList = []
      }
    }
  })
}
const healthInfoAllFun = () => {
  const param = state.userInfo.empi
  healthInfoAll(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      state.healthList = res.data
    } else {
      state.healthList = {}
    }
  })
}
const getHealthData = () => {
  // 健康数据
  const params = {
    empi: state.userInfo.empi,
    date: state.today
  }
  query_get_sport(params).then((res) => {
    // 运动信息
    sports.list = res.data
    sports.totalTime = 0
    sports.list.forEach((item) => {
      sports.totalTime += item.duration
    })
  })
  query_get_food(params).then((res) => {
    // 饮食信息
    food.info = res.data
    food.totalEnergy = 0
    res.data.forEach((i) => {
      food.totalEnergy += Number(computeTotal(i.list))
    })
  })
}
const computeTotal = (arr: Array) => {
  // 计算热量
  let total = 0
  arr.forEach((item) => {
    total += Math.round((item.energy * item.amount) / 100)
  })
  return total
}

// const changeTab = (index) => {
//   if (state.tabActive != index) {
//     state.tabActive = index
//     // 跳转tab触发事件
//     if (index == 0) {
//       getEstimate()
//     } else if (index == 1) {
//       getPrescription()
//     } else if (index == 2) {
//       getHealthData()
//       drugInfoGetFun()
//       healthInfoAllFun()
//     }
//   }
// }

const healthInput = (num) => {
  if (num == 1) {
    uni.navigateTo({
      url: '/module/src/pages/healthPortrait/healthData'
    })
  }else if (num == 2) {
    uni.navigateTo({
      url: '/module/src/pages/sports/sportsInfo/index'
    })
  } else if (num == 3) {
    uni.navigateTo({
      url: '/module/src/pages/food/dailyFood/index'
    })
  } else {
    uni.navigateTo({
      url: '/packA/pages/medication/index'
    })
  }
}
const healthInfo = (type) => {
  uni.navigateTo({
    url: '/packA/pages/echartsInfo/index?type=' + type
  })
}
const moreFun = () => {
  uni.navigateTo({
    url: '/packA/pages/moreMessage/index'
  })
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}

.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  visibility: hidden;
  content: '.';
}

.wrap {
  min-height: 100vh;
  padding-bottom: 64rpx;
  background: #fff;

  .header {
    position: relative;
    height: 520rpx;
    text-align: center;

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, #ddf7fa 0%, #f3f7f8 100%);
    }

    .info {
      position: relative;
      z-index: 1;
      box-sizing: border-box;
      display: inline-block;
      width: calc(100% - 64rpx);
      padding: 48rpx 32rpx;
      margin: 32rpx 0;
      text-align: left;
      background: #fff;
      border-radius: 16rpx;
      box-shadow: 0rpx 8rpx 16rpx 0rpx rgb(173 211 205 / 33%);

      .left {
        display: inline-block;
        width: 84rpx;
        height: 84rpx;
        margin-right: 20rpx;
        vertical-align: top;
      }

      .right {
        display: inline-block;
        width: calc(100% - 104rpx);
        vertical-align: top;

        .top {
          position: relative;

          .infos {
            font-size: 28rpx;
            color: #666;

            .name {
              display: inline-block;
              font-size: 36rpx;
              font-weight: 700;
              color: #333;
              vertical-align: middle;
            }

            .sex {
              display: inline-block;
              margin: 0 20rpx;
              vertical-align: middle;
            }

            .age {
              display: inline-block;
              vertical-align: middle;
            }
          }

          .more {
            position: absolute;
            top: 50%;
            right: 0;
            display: flex;
            align-items: center;
            height: 48rpx;
            padding: 0 24rpx;
            line-height: 48rpx;
            background: rgb(0 209 182 / 5%);
            border: 1rpx solid #00d1b6;
            border-radius: 24rpx;
            transform: translateY(-50%);

            .more-text {
              display: inline-block;
              font-size: 24rpx;
              font-weight: 700;
              color: #00d1b6;
              vertical-align: middle;
            }

            .img {
              display: inline-block;
              font-size: 28rpx;
              color: #00d1b6;
              vertical-align: middle;
              width: 28rpx;
              height: 28rpx;
            }
          }
        }

        .idCard {
          display: inline-block;
          padding: 4rpx 20rpx;
          margin-top: 20rpx;
          font-size: 24rpx;
          color: #666;
          border: 1rpx solid #e5e6eb;
          border-radius: 4rpx;
        }

        .border,
        .cardName,
        .num {
          display: inline-block;
          vertical-align: middle;
        }

        .border {
          width: 1rpx;
          height: 20rpx;
          margin: 0 10rpx;
          background: #7d7d7d;
        }
      }
    }
  }

  .content {
    position: relative;
    top: -96rpx;

    .tabWrap {
      position: relative;
      height: 100rpx;
      line-height: 100rpx;
      //   margin-top: -240rpx;

      .bg {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
      }

      .tab {
        position: relative;
        z-index: 1;

        .tabItem {
          position: relative;
          float: left;
          width: 33.3%;
          height: 100rpx;
          font-size: 32rpx;
          line-height: 120rpx;
          color: #222;
          text-align: center;

          .border {
            display: none;
          }

          &.on {
            z-index: 11;
            font-size: 36rpx;
            font-weight: 700;
            line-height: 100rpx;
            color: #00d1b6;

            .border {
              position: absolute;
              bottom: 0;
              left: 50%;
              display: block;
              width: 44rpx;
              height: 6rpx;
              background: #00d1b6;
              transform: translateX(-50%);
            }
          }
        }
      }
    }

    .tabActiveOne {
      background: #fff;

      .cancerWrap {
        position: relative;
        display: inline-block;
        width: 100%;
        padding-top: 32rpx;

        .cancer {
          padding: 27rpx 24rpx;
          margin: 0 32rpx;
          background: linear-gradient(to right, #e7f8f2, #fffefd);
          border-radius: 12rpx;

          .bg {
            display: inline-block;
            margin-right: 20rpx;
            font-size: 40rpx;
            vertical-align: middle;
          }

          .cancerName {
            display: inline-block;
            width: calc(100% - 100rpx);
            font-size: 36rpx;
            font-weight: 700;
            vertical-align: middle;

            .name {
              color: #222;
            }

            .state {
              color: #0cb67c;
            }
          }

          ::v-deep .u-icon {
            display: inline-block;
          }

          &.middle {
            background: linear-gradient(to right, #fff2ec, #fffefd);

            .cancerName {
              .state {
                color: #ff813c;
              }
            }
          }

          &.hight {
            background: linear-gradient(to right, #ffeeec, #fffefd);

            .cancerName {
              .state {
                color: #ff503d;
              }
            }
          }

          &.low {
            background: linear-gradient(to right, #f0f4ff, #fdfeff);

            .cancerName {
              .state {
                color: #5c8eff;
              }
            }
          }

          &.confirm {
            background: linear-gradient(to right, #f0f0fd, #fefeff);

            .cancerName {
              .state {
                color: #615de9;
              }
            }
          }
        }
      }
    }

    .tabActiveTwo {
      background: #fff;

      &.tabActiveThree {
        padding-top: 32rpx;
        border-radius: 24rpx 24rpx 0 0;

        .card {
          &:nth-child(1) {
            margin: 0 32rpx !important;
          }
        }
      }

      .cardOne {
        .card {
          padding-top: 32rpx;

          &:nth-child(1) {
            margin: 0 32rpx !important;
          }
        }
      }
    }

    .interpretationContentTwo {
      display: block;
      padding: 150rpx 0;
      margin: 0 32rpx;
      font-size: 28rpx;
      color: #666;
      text-align: center;
    }

    .card {
      margin: 32rpx 32rpx 0;
      background: #fff;

      &:nth-of-type(1) {
        margin: 32rpx 32rpx 0;
      }

      .interpretation {
        position: relative;

        .left {
          .border {
            display: inline-block;
            width: 8rpx;
            height: 32rpx;
            vertical-align: middle;
            background: #00d1b6;
            border-radius: 0 4rpx 4rpx 0;
          }

          .name {
            display: inline-block;
            margin-left: 16rpx;
            font-size: 32rpx;
            font-weight: 700;
            color: #222;
            vertical-align: middle;
          }
        }

        .right {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);

          .check-text {
            display: inline-block;
            font-size: 28rpx;
            color: #00d1b6;
            vertical-align: middle;
          }

          .img {
            display: inline-block;
            font-size: 32rpx;
            color: #00d1b6;
            vertical-align: middle;
            width: 32rpx;
            height: 32rpx;
          }

          &.record {
            padding: 4rpx 14rpx 6rpx 20rpx;
            border: 1rpx solid #00d1b6;
            border-radius: 45rpx;

            .check-text {
              font-weight: 700;
              transform: translateY(-2rpx);
            }
          }
        }
      }

      .timeWrap {
        position: relative;
        margin-top: 30rpx;
        font-size: 30rpx;
        color: #222;

        .right {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);

          .num {
            margin: 0 8rpx;
            font-size: 36rpx;
            font-weight: 700;
            color: #5c8eff;
          }
        }

        &.recipe {
          .right {
            .num {
              color: #00d1b6;
            }
          }
        }
      }

      .interpretationContent {
        padding: 24rpx;
        margin-top: 24rpx;
        font-size: 30rpx;
        color: #222;
        background: #fafafa;
        border-radius: 12rpx;

        &.riskList {
          padding: 16rpx 24rpx 32rpx;

          .riskitem {
            float: left;
            padding: 10rpx 24rpx;
            margin-top: 16rpx;
            margin-right: 3%;
            color: #0cb67c;
            background: rgb(12 182 124 / 10%);
            border-radius: 8rpx;
          }

          &.riskListCheck {
            .riskitem {
              color: #5c8eff;
              background: rgb(92 142 255 / 10%);
              border-color: rgb(92 142 255 / 10%);
            }
          }

          &.middle {
            .riskitem {
              color: #ff813c;
              background: rgb(255 129 60 / 10%);
              border-color: rgb(255 129 60 / 10%);
            }
          }

          &.hight {
            .riskitem {
              color: #ff503d;
              background: rgb(255 80 61 / 10%);
              border-color: rgb(255 80 61 / 10%);
            }
          }

          &.low {
            .riskitem {
              color: #5c8eff;
              background: rgb(92 142 255 / 10%);
              border-color: rgb(92 142 255 / 10%);
            }
          }

          &.confirm {
            .riskitem {
              color: #615de9;
              background: rgb(97 93 233 / 10%);
              border-color: rgb(97 93 233 / 10%);
            }
          }

          &.default {
            .riskitem {
              color: #222;
              background: #fff;
              border: 1rpx solid #e5e6eb;
            }
          }

          &.motionList {
            background: linear-gradient(to bottom, #f7f9ff, #fff);
            border: 1rpx solid #b5ccff;

            .riskitem {
              color: #fff;
              background: #5c8eff;
              border-color: #5c8eff;
            }

            .wraps {
              &.nodate {
                height: 100rpx;
                margin-top: 16rpx;
                font-size: 28rpx;
                line-height: 100rpx;
                color: #666;
                text-align: center;
              }
            }
          }

          &.recipeList {
            background: linear-gradient(to bottom, #f1fffd, #fff);
            border: 1rpx solid #8fe6db;

            .breakfast {
              position: relative;
              padding-top: 14rpx;
              font-size: 30rpx;
              font-weight: 700;
              color: #222;

              .right {
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);

                .num {
                  margin-right: 8rpx;
                  font-size: 36rpx;
                  color: #00d1b6;
                }

                .unit {
                  font-weight: 400;
                }
              }
            }

            .wraps {
              margin-top: 8rpx;

              .riskitem {
                color: #fff;
                background: #00d1b6;
                border-color: #00d1b6;
              }

              &.nodate {
                height: 100rpx;
                margin-top: 16rpx;
                font-size: 28rpx;
                line-height: 100rpx;
                color: #666;
                text-align: center;
              }
            }
          }

          &.medicationList {
            background: linear-gradient(to bottom, #f9f7ff, #fff);
            border: 1rpx solid #b2b5ff;

            .wraps {
              margin-top: 8rpx;

              .riskitem {
                color: #fff;
                background: #6a70ff;
                border-color: #6a70ff;
              }

              &.nodate {
                height: 100rpx;
                margin-top: 16rpx;
                font-size: 28rpx;
                line-height: 100rpx;
                color: #666;
                text-align: center;
              }
            }
          }
        }
      }

      .informationWrap {
        .item {
          box-sizing: border-box;
          float: left;
          width: calc(50% - 14rpx);
          padding: 32rpx 24rpx;
          margin-top: 32rpx;
          background: #fafafa;
          border: 1rpx solid #e5e6eb;
          border-radius: 16rpx;

          &:nth-child(2n + 1) {
            margin-right: 22rpx;
          }

          .top {
            position: relative;
            font-size: 24rpx;
            color: #999;

            .img {
              display: inline-block;
              margin-right: 16rpx;
              font-size: 56rpx;
              vertical-align: middle;
              width: 56rpx;
              height: 56rpx;
            }

            .name {
              display: inline-block;
              font-size: 32rpx;
              font-weight: 700;
              color: #222;
              vertical-align: middle;
            }

            .meals {
              display: inline-block;
              margin-left: 10rpx;
              color: #666;
              vertical-align: middle;
            }

            .date {
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
            }
          }

          .min {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-top: 24rpx;

            .name-label {
              width: 200rpx;
              font-size: 30rpx;
              font-weight: 400;
              color: #222;
            }

            .name {
              // display: inline-block;
              font-size: 40rpx;
              font-weight: 700;
              color: #222;
              // vertical-align: middle;
            }

            .slash {
              display: inline-block;
              margin: 0 5rpx;
              vertical-align: middle;
            }

            .trend {
              display: inline-block;
              width: 18rpx;
              height: 18rpx;
              margin-left: 8rpx;
              vertical-align: middle;

              &.on {
                transform: rotate(-180deg);
              }

              &.default {
                margin: 0;
              }
            }

            .date {
              // position: absolute;
              // top: 50%;
              // right: 0;
              font-size: 24rpx;
              color: #999;
              // transform: translateY(-50%);
            }

            .unit {
              font-size: 28rpx;
              color: #999;
            }
          }
        }
      }
    }

    .authenticationBtn {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 3;
      width: 100%;
      background: #fff;

      .wraps {
        padding: 0 32rpx;
        padding-top: 24rpx;
        padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
        font-size: 32rpx;
        color: #666;
        text-align: center;
        border-top: 1px solid #e5e6eb;

        .goAuthentication {
          display: inline-block;
          width: 100%;
          height: 88rpx;
          line-height: 88rpx;
          color: #fff;
          vertical-align: middle;
          background: #00d1b6;
          border: 1rpx solid #00d1b6;
          border-radius: 44rpx;
        }
      }
    }
  }

  ::v-deep .u-popup {
    .popup-wrap {
      //   padding-bottom: calc(rpx + constant(safe-area-inset-bottom));
      //   padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
      padding-bottom: 24rpx;

      .title {
        padding: 32rpx;
        font-size: 32rpx;
        font-weight: 700;
        text-align: center;
        border-bottom: 1px solid #e5e6eb;
      }

      .popupContent {
        display: inline-block;
        max-height: 756rpx;
        padding: 32rpx;
        overflow: auto;
        font-size: 30rpx;
        font-weight: 400;
        line-height: 54rpx;
        color: #222;
        text-align: justify;
      }

      .btn {
        height: 88rpx;
        margin: 32rpx 32rpx 0;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 88rpx;
        color: #fff;
        text-align: center;
        background: #00d1b6;
        border-radius: 44rpx;
      }
    }

    .u-popup__content__close {
      top: 40rpx;

      .uicon-close {
        font-size: 32rpx !important;
        line-height: 32rpx !important;
      }
    }
  }
}

.bg-box {
  position: relative;
}

.bg-box-main {
  position: absolute;
  top: 72rpx;
  left: 30rpx;
  display: flex;
  flex-direction: column;

  .title {
    width: 288rpx;
    height: 58rpx;
    margin-bottom: 10rpx;
  }

  .sub-title {
    font-size: 28rpx;
    font-weight: 400;
    color: #296576;
  }
}

.bg-box-image {
  width: 100%;
  height: 328rpx;
}

.special-label {
  display: flex;
  align-items: center;
  width: 120rpx;
  text-align: center;

  .trend {
    margin-left: 16rpx;
  }
}
</style>
